<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: burlywood;
            font-size: 0px;
        }
        span{
            /* 默认字体大小为16px */
            background-color: green;
        }
        img{
            /* 默认是基线对齐 */
            /* vertical-align: baseline; */
            /* vertical-align: middle; */
            /* vertical-align: text-top; */
            /* vertical-align: text-bottom; */
             /* vertical-align: -195px;  */
            display: block;
        }
    </style>
</head>
<body>
    <!-- 
    vertical-align:行内块元素与文本的对齐方式
    图片默认是参照文本的x的基线对齐
    顶线
       中线 middleline:字母x的中间
       基线 baseline:字母x的底部
    底线
    
    解决图标底部 有白边(超出部分)
    1.设置字体大小为0,需要在父盒子,会导致所有子元素的字体都为0px
    2.把元素转换成块级元素  display:block
    3.img,把块级元素改为行内块元素-->
    <div class="box">
        <img src="" alt="">
        <span>我是帅气的文字</span>
    </div>
</body>
</html>